/**
 * admui-basic v2.1.0 (http://www.admui.com/)
 * Copyright 2015-2019 Admui Team
 * Licensed under the Admui License 1.1 (http://www.admui.com/about/license)
 */
(function(window, document, $) {
  'use strict';

  /* global Chartist, Skycons */

  var vPage = {
    exampleOne: null,
    exampleTwo: null,
    timeExample: null,
    chartExample1: function() {
      // 折线图颜色
      var self = this;
      var timelineLabels = [];
      var timelineData1 = [];
      var timelineData2 = [];
      var timelineData3 = [];
      var totalPoints = 20;
      var updateInterval = 2000;
      var now = new Date().getTime();
      var timlelineData;
      var timelineOptions;

      function GetData() {
        var x;
        var y;
        var z;

        timelineLabels.shift();
        timelineData1.shift();
        timelineData2.shift();
        timelineData3.shift();

        while (timelineData1.length < totalPoints) {
          x = Math.random() * 100 + 800;
          y = Math.random() * 100 + 400;
          z = Math.random() * 100 + 200;
          timelineLabels.push((now += updateInterval));
          timelineData1.push(x);
          timelineData2.push(y);
          timelineData3.push(z);
        }
      }

      timlelineData = {
        labels: timelineLabels,
        series: [timelineData1, timelineData2, timelineData3]
      };
      timelineOptions = {
        low: 0,
        showArea: true,
        showPoint: false,
        showLine: false,
        fullWidth: true,
        chartPadding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        axisX: {
          showLabel: false,
          showGrid: false,
          offset: 0
        },
        axisY: {
          showLabel: false,
          showGrid: false,
          offset: 0
        },
        plugins: [Chartist.plugins.tooltip()]
      };

      function draw() {
        GetData();

        self.exampleOne = setTimeout(draw, updateInterval);
        return new Chartist.Line('#widgetLineareaColor .ct-chart', timlelineData, timelineOptions);
      }

      draw();
    },
    chartExample2: function() {
      // 条形堆叠图
      var self = this;
      var timelineLabels = [];
      var timelineData1 = [];
      var timelineData2 = [];
      var totalPoints = 30;
      var updateInterval = 2500;
      var now = new Date().getTime();
      var timlelineData;
      var timelineOptions;

      function GetData() {
        var x;
        var y;

        timelineLabels.shift();
        timelineData1.shift();
        timelineData2.shift();

        while (timelineData1.length < totalPoints) {
          x = Math.floor(Math.random() * 100) + 800;
          y = Math.floor(Math.random() * 100) + 600;
          timelineLabels.push((now += updateInterval));
          timelineData1.push(x);
          timelineData2.push(y);
        }
      }

      timlelineData = {
        labels: timelineLabels,
        series: [timelineData1, timelineData2]
      };
      timelineOptions = {
        stackBars: true,
        fullWidth: true,
        seriesBarDistance: 0,
        chartPadding: {
          top: 0,
          right: 30,
          bottom: 30,
          left: 20
        },
        axisX: {
          showLabel: false,
          showGrid: false,
          offset: 0
        },
        axisY: {
          showLabel: false,
          showGrid: false,
          offset: 0
        },
        plugins: [Chartist.plugins.tooltip()]
      };

      function draw() {
        GetData();

        self.exampleTwo = setTimeout(draw, updateInterval);
        return new Chartist.Bar('#widgetStackedBar .ct-chart', timlelineData, timelineOptions);
      }

      draw();
    },
    linePoint1: function() {
      // Widget Linepoint

      return new Chartist.Line(
        '#widgetLinepoint .ct-chart',
        {
          labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
          series: [[1, 1.5, 0.5, 2, 1, 2.5, 1.5, 2]]
        },
        {
          low: 0,
          showArea: false,
          showPoint: true,
          showLine: true,
          fullWidth: true,
          lineSmooth: false,
          chartPadding: {
            top: 10,
            right: -4,
            bottom: 10,
            left: -4
          },
          axisX: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          axisY: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          plugins: [Chartist.plugins.tooltip()]
        }
      );
    },
    saleBar: function() {
      // Widget Sale Bar
      return new Chartist.Bar(
        '#widgetSaleBar .ct-chart',
        {
          labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K', 'L', 'M', 'N', 'O', 'P', 'Q'],
          series: [[50, 90, 100, 90, 110, 100, 120, 130, 115, 95, 80, 85, 100, 140, 130, 120]]
        },
        {
          low: 0,
          fullWidth: true,
          chartPadding: {
            top: 0,
            right: 20,
            bottom: 30,
            left: 20
          },
          axisX: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          axisY: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          plugins: [Chartist.plugins.tooltip()]
        }
      );
    },
    overallViews: function() {
      /* eslint no-new: "off" */
      // Widget Overall Views
      new Chartist.Bar(
        '#widgetOverallViews .small-bar-one',
        {
          labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
          series: [[120, 60, 100, 50, 40, 120, 80, 130]]
        },
        {
          low: 0,
          fullWidth: true,
          chartPadding: {
            top: -10,
            right: 0,
            bottom: 0,
            left: 0
          },
          axisX: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          axisY: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          plugins: [Chartist.plugins.tooltip()]
        }
      );

      new Chartist.Bar(
        '#widgetOverallViews .small-bar-two',
        {
          labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
          series: [[50, 90, 30, 90, 130, 40, 120, 90]]
        },
        {
          low: 0,
          fullWidth: true,
          chartPadding: {
            top: -10,
            right: 0,
            bottom: 0,
            left: 0
          },
          axisX: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          axisY: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          plugins: [Chartist.plugins.tooltip()]
        }
      );

      new Chartist.Line(
        '#widgetOverallViews .line-chart',
        {
          labels: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
          series: [[20, 50, 70, 110, 100, 200, 230], [50, 80, 140, 130, 150, 110, 160]]
        },
        {
          low: 0,
          showArea: false,
          showPoint: false,
          showLine: true,
          lineSmooth: false,
          fullWidth: true,
          chartPadding: {
            top: 0,
            right: 10,
            bottom: 0,
            left: 10
          },
          axisX: {
            showLabel: true,
            showGrid: false,
            offset: 30
          },
          axisY: {
            showLabel: true,
            showGrid: true,
            offset: 30
          },
          plugins: [Chartist.plugins.tooltip()]
        }
      );
    },
    timeLine: function() {
      // Widget Timeline
      var self = this;
      var timelineLabels = [];
      var timelineData1 = [];
      var timelineData2 = [];
      var totalPoints = 20;
      var updateInterval = 1000;
      var now = new Date().getTime();
      var timlelineData;
      var timelineOptions;

      function GetData() {
        var x;
        var y;

        timelineLabels.shift();
        timelineData1.shift();
        timelineData2.shift();

        while (timelineData1.length < totalPoints) {
          x = Math.random() * 100 + 800;
          y = Math.random() * 100 + 400;
          timelineLabels.push((now += updateInterval));
          timelineData1.push(x);
          timelineData2.push(y);
        }
      }

      timlelineData = {
        labels: timelineLabels,
        series: [timelineData1, timelineData2]
      };
      timelineOptions = {
        low: 0,
        showArea: true,
        showPoint: false,
        showLine: false,
        fullWidth: true,
        chartPadding: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        axisX: {
          showLabel: false,
          showGrid: false,
          offset: 0
        },
        axisY: {
          showLabel: false,
          showGrid: false,
          offset: 0
        },
        plugins: [Chartist.plugins.tooltip()]
      };

      function draw() {
        GetData();

        new Chartist.Line('#widgetTimeline .ct-chart', timlelineData, timelineOptions);
        self.timeExample = setTimeout(draw, updateInterval);
      }

      draw();
    },
    skyCon: function() {
      var snow = new Skycons({
        color: $.getColor('blue-grey', 500)
      });
      var sunny = new Skycons({
        color: $.getColor('blue-grey', 700)
      });

      snow.set(document.getElementById('widgetSnow'), 'snow');
      snow.play();

      sunny.set(document.getElementById('widgetSunny'), 'clear-day');
      sunny.play();
    },
    linePoint2: function() {
      new Chartist.Line(
        '#widgetLinepointDate .ct-chart',
        {
          labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
          series: [[36, 45, 28, 19, 39, 46, 35, 13]]
        },
        {
          low: 0,
          showArea: false,
          showPoint: true,
          showLine: true,
          fullWidth: true,
          lineSmooth: false,
          chartPadding: {
            top: 5,
            right: -4,
            bottom: 10,
            left: -4
          },
          axisX: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          axisY: {
            showLabel: false,
            showGrid: false,
            offset: 0
          },
          plugins: [Chartist.plugins.tooltip()]
        }
      );
    },
    run: function() {
      this.chartExample1();
      this.chartExample2();
      this.linePoint1();
      this.linePoint2();
      this.saleBar();
      this.overallViews();
      this.timeLine();
      this.skyCon();
    }
  };

  $(function() {
    vPage.run();
  });
})(window, document, jQuery);
